<template>
  <div>
    <!-- 页面头部 MySearch 搜索 -->
    <MySearch
      @openDialog="openDialog"
      @searchpage="searchpage"
      
    ></MySearch>

    <!-- 页面组件table 新增 -->
    <MyAdd
      :btnadd="btnadd"
      :row="row"
      :arr="arr"
      @resetHome="initCmtView"
      v-if="dialogTableVisible"
      @parentclosedialog="parentclosedialog"
    ></MyAdd>

    <!-- 页面组件table 表格 -->
    <MyTable :arr="arr" @resetHome="initCmtView" @doing="doing"></MyTable>

    <!-- 页面组件 Mypage分页 -->
    <MyPage  @changePage="changePage" @changepageSize='changepageSize'  :page="page" :pageSize="pageSize"  :total="total" />
  </div>
</template>

<script>
import MySearch from "./components/CmtSearch.vue";
import MyAdd from "./components/Cmtadd.vue";
import MyTable from "./components/Cmttable.vue";
import MyPage from "./components/Cmtpage.vue";
import { getcmtApi } from "@/api/cmthomeApi";

export default {
  components: {
    MyTable,
    MyAdd,
    MyPage,
    MySearch,
  },
  data() {
    return {
      keyword: "", 
     
      pageSize:20,   //每页显示的条数
      page:1,   //当前显示的页码
      total:0,     //总条数
      pageSizes:[20,40,60,80,100] , //  这个是和pageSize成套使用
      btnadd: 0,
      row: {},
      arr: [],
      dialogTableVisible: false,
    };
  },
  mounted() {
    this.initCmtView();
  },
  methods: {
    // 添加事件
    changePage(val){
      this.page = val
      console.log(this.page);
      this.initCmtView()
    },
    changepageSize(val){
       //控制pageSize切换
       this.pageSize = val 
       this.initCmtView()
    },
    searchpage(name) {
    
      this.keyword =name
      
      this.initCmtView();
    },
   

    openDialog() {
      this.dialogTableVisible = true;
      this.btnadd = 0;
      this.row = {};
    },
    parentclosedialog() {
      this.dialogTableVisible = false;
    },
    initCmtView() {
      getcmtApi({keyword:this.keyword,  page:this.page,pageSize:this.pageSize}).then((res) => {
        this.arr = res.data;
        this.total =res.total
       
        
      });
    },
   
    // 编辑事件
    doing(row) {
      this.row = row;
      console.log(this.row);
      this.btnadd = 2;
      this.dialogTableVisible = true;
    },
  },
};
</script>

<style>
</style>